<script lang="ts" setup>
import { ref } from 'vue'
import { isString } from 'lodash-es'
import * as controls from '../../controls'
import type { SettingProps } from '../props'

const props = withDefaults(defineProps<SettingProps>(), {
  settings: () => [
    {
      name: 'base',
      title: '基础配置',
      items: [
        {
          name: 'id',
          title: '组件ID',
          control: 'Input',
          props: { disabled: true },
        },
        { name: 'title', title: '组件名称', control: 'Input' },
        { name: 'x', title: '横向距离', control: 'Input' },
        { name: 'y', title: '纵向距离', control: 'Input' },
        { name: 'width', title: '组件宽度', control: 'Input' },
        { name: 'height', title: '组件长度', control: 'Input' },
      ],
    },

    {
      name: 'style',
      title: '样式配置',
      items: [
        { name: 'color', title: '文本颜色', control: 'Input' },
        { name: 'background', title: '组件背景', control: 'Input' },
        { name: 'themeColor', title: '主题色', control: 'Input' },
      ],
    },
    // { name: '_base', title: '基础配置', items: [] },
  ],
})

const activeName = ref(props?.settings?.map(e => e?.name))
</script>

<template>
  <el-card class="w-full p-2">
    <el-collapse v-model="activeName">
      <el-collapse-item
        v-for="e in settings"
        :key="e.name"
        :title="e?.title"
        :name="e.name"
      >
        <template v-if="e?.items?.length">
          <div v-for="u in e?.items" :key="u?.name">
            <div class="mb-3 ms-2 flex items-center justify-between">
              <label :for="u?.name" class="font-bold">{{ u?.title }}</label>
              <component
                :is="isString(u?.control) ? controls[u?.control] : u?.control"
                v-if="u?.control"
                :id="u?.name"
                v-bind="u?.props"
              />
            </div>
          </div>
        </template>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<style lang="scss" module></style>
